<template>
  <div>
    <el-card class="box-card">
      <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules">
        <div style="text-align: center">
          <i
            class="icon iconfont icon-apphoutaiguanli"
            style="font-size: 100px; color: #e9232c"
          ></i>
        </div>
        <h2 style="text-align: center">后台管理系统</h2>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="icon iconfont icon-icon"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            type="password"
          >
            <span slot="prefix">
              <i class="icon iconfont icon-mima"></i>
            </span>
            <span slot="suffix">
              <i class="icon iconfont icon-icon-test1"></i>
            </span>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" style="width: 45%" @click="login"
            >登录</el-button
          >
          <el-button type="danger" style="width: 45%" @click="reset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <img
      src="../../assets/images/login_center_bg.png"
      alt=""
      class="login-bg-img"
    />
  </div>
</template>

<script>
import { checkLogin } from "../../api/adminApi"
import config from "../../config/config"
import md5 from "blueimp-md5"
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginFormRules: {
        username: [
          { required: true, message: "请输入登录的用户名", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录的密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods:{
    // 点击登录
    login(){
      this.$refs.loginForm.validate(async (valid) => {
        if(valid){
          // 发请求
          let res = await checkLogin(this.loginForm.username,md5(this.loginForm.password,config.KEY));
          if(res.status != 1){
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          // token 一个令牌  有的接口需要带着这个令牌去访问
          // 没有令牌接口是调用失败的
          // 登录成功后，服务器返回令牌，令牌需要存起来，目的是后面调用其它接口，可以使用令牌
          // 令牌存储sessionStorage中，会话结束，令牌就没了  
          // 令牌并不是一直有效的，是有生存周期，到时候，token会自动失效，令牌是后端程序员设置
          window.sessionStorage.setItem("token",res.data.token);

          // 用户信息中包含了当前用户所对应的角色
          // 根据角色就可以获取左侧菜单 
          window.sessionStorage.setItem("user", JSON.stringify(res.data) );

          // 跳到后台首页面
          this.$router.replace("/home")
        }else{
          console.log("校验不通过");
          return false;
        }
      })

    },
    // 点击重置
    reset(){
      this.$refs.loginForm.resetFields();
    }
  }
};
</script>

<style scoped lang="less">
.box-card {
  width: 360px;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-left: -180px;
  border-top: 10px solid #e9232c;
  margin-top: 120px;
}
.login-bg-img {
  background: #e9232c;
  margin-top: 205px;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
}
</style>